<template>
  <view>
    <view class="uni-header">
      <uni-stat-breadcrumb class="uni-stat-breadcrumb-on-phone" />
      <view class="uni-group">
        <button @click="addGroup(null)" class="uni-button" type="primary" size="mini">{{$t('common.button.add')}}分组</button>
      </view>
    </view>
    
    <view class="uni-container">
      
      <uni-table ref="table" :loading="loading" emptyText="没有更多数据" border stripe type="selection"
        @selection-change="selectionChange">
        <uni-tr>
          <uni-th align="center" width="120">标识</uni-th>
          <uni-th align="center" width="120">标题</uni-th>
          <uni-th align="center" width="50">排序号</uni-th>
          <uni-th align="center" width="200">操作</uni-th>
        </uni-tr>
        <uni-tr v-for="(item,index) in items" :key="index">
          <uni-td align="center">{{item.name}}</uni-td>
          <uni-td align="center">{{item.title}}</uni-td>
          <uni-td align="center">
            <uni-easyinput @change="saveConfigGroup(item)" :clearable="false"
              v-model="item.serial" trim="both" />
          </uni-td>
          <uni-td align="center">
           <view class="uni-group">
             <button @click="addGroup(item)" class="uni-button"
               size="mini" type="primary">{{$t('common.button.edit')}}</button>
             <button @click="deleteConfigGroup([item.id])" class="uni-button" size="mini"
               type="warn">{{$t('common.button.delete')}}</button>
           </view>
          </uni-td>
        </uni-tr>
      </uni-table>
      
      <uni-pagination show-icon show-page-size :page-size="pageSize" v-model="pageCurrent" :current="pageCurrent" :total="total"
        @change="changePage" @pageSizeChange="changeSize" />
    </view>
  </view>
  <AddGroup v-model:open="openAddGroup" :data="currGroup" @success="search" />
</template>


<script>
  import AddGroup from './add-group/add-group.vue'
  import {
    mapActions
  } from "vuex"
  export default {
    components: {
      AddGroup
    },
    data() {
      return {
        pageSize: 20,
        pageCurrent: 1,
        total: 0,
        items: [],
        loading: true,
        selectIds: [],
        init: false,
        openAddGroup: false,
        currGroup: {},
      }
    },
    onShow() {
      this.search()
    },
    methods: {
      ...mapActions('configGroup', ['save', 'list', 'update', 'delete']),
      addGroup(data) {
        this.currGroup = data
        this.openAddGroup = true
      },
      getConfigGroupList(data) {
        return this.list(data);
      },
      saveConfigGroup(data) {
        return this.save(data).then(_ => {
          uni.showToast({
            title: "操作成功",
            icon: 'none',
            mask: true,
          })
          this.search();
        });
      },
      deleteConfigGroup(ids) {
        const that = this
        uni.showModal({
          title: "确认删除指定记录吗？",
          success(e2) {
            if (e2.cancel) {
              return;
            }
            that.delete({
              id: ids
            }).then(_ => {
              uni.showToast({
                title: "操作成功"
              })
              that.search();
            })
          }
        })
      },
      search() {
        this.selectIds = [];
        if (this.$refs.table) {
          this.$refs.table.clearSelection();
        }
        
        
        this.loading = true
        this.items = [];
        let conditionCopy = {}
        conditionCopy.page = this.pageCurrent;
        conditionCopy.limit = this.pageSize;
        this.list(conditionCopy).then(data => {
          this.items = data.list
          this.total = data.count
          this.loading = false
        });
      },
      changeSize(e) {
        this.pageSize = e;
        this.pageCurrent = 1;
        this.search()
      },
      changePage(e) {
        this.pageCurrent = e.current;
        this.search()
      },
      getSelectIds() {
        if (!this.selectIds.length) {
          uni.showToast({
            title: "请指定操作的记录",
            icon: "none"
          })
          throw new Error("请指定操作的记录");
        }
        return this.selectIds
      },
      selectionChange(e) {
        this.selectIds = []
        e.detail.index.forEach(index => {
          this.selectIds.push(this.items[index].id)
        })
      },
    }
  }
</script>